<template>
  <div>
    <!-- 蓝 -->
    <div class="up">
      <div class="bulecode">
        <div class="title">
          <p>工单统计</p>
          <span>{{ this.mouthone }} ~ {{ this.nowday }}</span>
        </div>
        <div class="footer">
          <div>
            <p>{{ this.total }}</p>
            <h1>工单总数（个）</h1>
          </div>
          <div>
            <p>{{ this.workerCount }}</p>
            <h1>完成工单（个）</h1>
          </div>
          <div>
            <p>{{ this.completedTotal }}</p>
            <h1>进行工单（个）</h1>
          </div>
          <div>
            <p>{{ cancelTotal }}</p>
            <h1>取消工单（个）</h1>
          </div>
        </div>
      </div>
      <!-- 红 -->
      <div class="red">
        <div class="title">
          <p>销售统计</p>
          <span>{{this.mouthone}} ~ {{this.nowday}}</span>
        </div>
        <div class="footerred">
          <div>
            <p>{{this.order}}</p>
            <h1>订单量（个）</h1>
          </div>
          <div>
            <p>{{this.sprice}}</p>
            <h1>销售额（万元）</h1>
          </div>
        </div>
      </div>
    </div>
    <!-- 商品列表 -->
    <div class="white">
      <div class="title">
        <p>商品热榜</p>
        <span>2022.11.01 ~ 2022.11.19</span>
          </div>
        <div class="hostlist">
<Goodlist v-for="(item, index) in skuTop" :key="index" :index="index" :item="item"></Goodlist>

      </div>
    </div>
    <!-- 可视化图 -->
    <div class="ec_center">
      <div class="title">
        <div>
        <p>销售统计</p>
        <span>2022.11.01 ~ 2022.11.19</span>
        </div>
         <div class="week-month-year">
          <div @click="type=1"><el-button>周</el-button></div>
          <div @click="type=2"><el-button>月</el-button></div>
          <div @click="type=3"><el-button>年</el-button></div>
        </div>
      </div>
      <!-- 中间的试图 -->
      <div class="center_footer">
        <!-- 左边的图 -->
        <div
          class="center_footer_left"
          ref="one"
          :style="{ width: '450px', height: '300px' }"
        ></div>
        <div
          class="center_footer_right"
          ref="two"
          :style="{ width: '450px', height: '300px' }"
        ></div>
      </div>
    </div>
    <!-- 最下边的 -->
    <div class="loop">
      <div class="loop_left">
        <div class="title">
          <p>合作商点位数Top5</p>
          <span><i class="el-icon-chat-dot-round"></i></span>
        </div>
        <div class="loop_footer" >
          <div class="tutu" ref="ttt" :style="{ width: '450px', height: '300px' }">11</div>
          <div class="tuyou">
            <div>
              <p>{{this.Five}}</p>
              <h1>点位数</h1>
            </div>
             <div class="work">
              <p>{{this.FiveX}}</p>
              <h1>商家合作</h1>
            </div>
          </div>
        </div>
      </div>
      <div class="loop_right">
        <div class="title">
          <p>异常设备监控</p>
          <span><i class="el-icon-chat-dot-round"></i></span>
        </div>
        <img
          src="http://likede2-admin.itheima.net/img/empty.87c4f71b.png"
          alt=""
        />
        <p>暂无数据</p>
      </div>
    </div>
  </div>
</template>

<script>
import Goodlist from '@/components/HelloWorld.vue'
import { San, FiveX, Five, taskstate, orderCount, orderAmount, regionCollec, mounthCollect, getSkuTop } from '@/api/user'
// import axios from 'axios'
export default {
  components: {
    Goodlist
  },
  name: 'Pc2FbEcharts',
  data () {
    return {
      mouthone: '',
      nowday: '',
      total: '',
      completedTotal: '',
      cancelTotal: '',
      workerCount: '',
      order: '', // 总订单金额
      sprice: '', // 一定范围的收入
      skuTop: [], // 商品热卖
      Five: '', // 点位
      FiveX: '',
      San: [],
      type: 1

    }
  },
  async created () {
    // 拿时间
    this.nowday = this.$moment(new Date()).startOf('day').format('YYYY-MM-DD')
    this.mouthone = this.$moment()
      .startOf('month')
      .format('YYYY-MM-DD')
    console.log(this.mouthone)
    // 工单统计的请求
    const res = await taskstate(this.mouthone + ' 00:00:00', this.nowday + ' 23:59:59')
    console.log(res)
    this.total = res.reduce((sum, item) => sum + item.total, 0)
    this.completedTotal = res.reduce(
      (sum, item) => sum + item.completedTotal,
      0
    )
    this.cancelTotal = res.reduce((sum, item) => sum + item.cancelTotal, 0)
    this.workerCount = res.reduce((sum, item) => sum + item.workerCount, 0)
    // 一段时间总订单 9360
    const res1 = await orderCount({
      start: this.mouthone + ' 00:00:00',
      end: this.nowday + ' 23:59:59'
    })
    this.order = res1
    // 一定范围内的收入
    const res2 = await orderAmount({
      start: this.mouthone + ' 00:00:00',
      end: this.nowday + ' 23:59:59'
    })
    // console.log(typeof )
    this.sprice = (+res2 / 1000000).toFixed(2)
    // 柱形//商品热榜
    const good = await getSkuTop(this.mouthone, this.nowday)
    this.skuTop = good
    // 曲折1
    // const res4 = await amountCollect(this.mouthone, this.nowday, 1)
    // console.log(res4)
    // 曲线月
    const res5 = await mounthCollect(this.mouthone, this.nowday, 2)
    console.log(res5)
    // five点位
    const countfive = await Five()
    console.log(countfive)
    this.Five = countfive
    // 商家总数()
    const Fivetotal = await FiveX()
    this.FiveX = Fivetotal
  },
  mounted () {
    this.drawLine()
    this.drawLiney()
    this.ttt()
  },

  methods: {
    async drawLine () {
      let res4 = []
      if (this.type === 1) {
        res4 = await mounthCollect(this.$moment().day(1).format('YYYY-MM-DD'), this.nowday, 1)
        console.log(res4)
      } else if (this.type === 3) {
        res4 = await mounthCollect(this.mouthone.slice(0, 4) + '-01-01', this.nowday, 2)
        console.log(res4)
      } else if (this.type === 2) {
        res4 = await mounthCollect(this.mouthone.slice(0, 4) + '-01-01', this.nowday, 1)
      }
      const myChart1 = this.$echarts.init(this.$refs.one)

      myChart1.setOption({
        title: {
          text: '销售额趋势图',
          left: 'center',
          textStyle: {
            fontSize: '14px',
            color: '#333333'

          }
        },

        tooltip: {
          trigger: 'axis' // 悬浮弹框
        },
        color: ['#ec635d'],
        xAxis: {
          type: 'category',
          data: res4.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            data: res4.series,
            type: 'line',
            smooth: true,
            symbolSize: 4,
            itemStyle: {
              normal: {
                color: '#ec635d',
                label: {
                  show: false, // 开启显示
                  position: 'bottom', // 在下方显示
                  textStyle: {
                  // 数值样式
                    color: '#65ABE7',
                    fontSize: 16
                  }
                }
              }
            },
            // 阴影样式
            areaStyle: {
              color: {
                type: 'linear',
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0, color: 'rgba(243, 93, 93,0.7)'
                }, {
                  offset: 1, color: 'rgba(255, 255, 255 , 0.1)' // 100% 处的颜色
                }],
                global: false
              }
            }
          }
        ]
      }
      )
    },
    // 右
    async   drawLiney () {
    // 基于准备好的dom，初始化echarts实例
      let res3 = []
      if (this.type === 1) {
        res3 = await regionCollec(this.$moment().day(1).format('YYYY-MM-DD'), this.nowday, 1)
      } else if (this.type === 3) {
        res3 = await regionCollec(this.mouthone.slice(0, 4) + '-01-01', this.nowday, 2)
      } else if (this.type === 2) {
        res3 = await regionCollec(this.mouthone.slice(0, 4) + '-01-01', this.nowday, 1)
      }
      const myChart = this.$echarts.init(this.$refs.two)
      // const res3 = await regionCollec(this.mouthone, this.nowday)
      // console.log(res3)
      // 绘制图表
      const option = {
        title: {
          text: '销售额分布',
          left: 'center',
          textStyle: {
            fontSize: '14px',
            color: '#333333'

          }
        },
        tooltip: {},
        xAxis: {
          data: res3.xAxis
        },
        yAxis: {
          type: 'value',
          name: '单位：元'
        },
        series: [
          {
            name: '销量',
            type: 'bar',
            barWidth: '10%',
            color: '#96b0f9',
            data: res3.series
          }
        ]

      }
      myChart.setOption(option)
    },
    // 下

    async ttt () {
      const myChart2 = this.$echarts.init(this.$refs.ttt)
      // 扇形
      const san = await San()
      console.log(san)
      this.San = san
      // 绘制图表
      myChart2.setOption({
        title: {
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            radius: ['25%', '60%'],
            roseType: 'radius',
            type: 'pie',
            data: this.San,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  },

  watch: {
    // 监听type变化
    type () {
      this.drawLine()
      this.drawLiney()
    }
  }

}

</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}
.ec_center .title{
  display: flex;
  justify-content: space-between;
}
//zhounianyue
.week-month-year{
  margin-right: 10px;
  display: flex;
    justify-content: center;
    align-items: center;
    background-color: #F7FBFF;
    div{
    font-size: 14px;
    color: #9ca3b4;
    cursor: pointer;
    button{
      width: 30px;
       height: 25px;
     margin-left: 10px;
    }
    }
}
//下边的图
.loop_footer{
  display: flex;
  justify-content: space-between;
}
.tuyou{
  width: 154px;
    height: 230px;
    padding-top: 47px;
    margin-right:  30px;
    background: linear-gradient(135deg,transparent,#f8f8f9 0) 0 0,linear-gradient(-135deg,transparent 12px,#f8f8f9 0) 100% 0,linear-gradient(-45deg,transparent,#f8f8f9 0) 100% 100%,linear-gradient(45deg,transparent 12px,#f8f8f9 0) 0 100%;
    background-size: 50% 50%;
    background-repeat: no-repeat;
    p{
          height: 33px;
    font-size: 24px;
    font-family: PingFangSC-Semibold,PingFang SC;
    font-weight: 600;
    color: #072074;
    line-height: 33px;
    }
    h1{
          height: 17px;
    margin-top: 6px;
    font-size: 12px;
    font-family: PingFangSC-Regular,PingFang SC;
    font-weight: 400;
    color: #000412;
    line-height: 17px;
    }
    .work{
      margin-top: 30px;
    }
}
//下边的
.loop {
  margin-left: 10px;
  margin-top: 20px;
  display: flex;
  justify-content: space-between;
  .loop_left {
    width: 744px;
    border-radius: 20px;
    height: 353px;
    background-color: #fff;
    .title {
      display: flex;
      justify-content: space-between;
        i{
        color: blue;
      }
    }
  }
  .loop_right {
    width: 580px;
    border-radius: 20px;
    height: 353px;
    background-color: #fff;
    margin-left: 10px;
    img {
      margin-top: 40px;
    }
    .title {
      display: flex;
      justify-content: space-between;
      i{
        color: blue;
      }
    }
  }
}
//下边的标题

//中间的
.ec_center {
  background-color: #fff;
  width: 910px;
  margin-left: 20px;
  height: 352px;
  border-radius: 20px;
  margin-top: 30px;
}
//中间下边的
.center_footer {
  display: flex;
  justify-content: space-between;
}
//上边盒子的大盒子
.up {
  width: 900px;
  display: flex;
  margin-left: 20px;
  // justify-content: space-between;
}
//蓝色盒子
.bulecode {
  width: 479px;
  height: 166px;
  margin-top: 60px;
  border-radius: 20px;
  background: #e9f3ff;
  background-image: url()
    url(http://likede2-admin.itheima.net/img/task.66b715b7.png);
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  .footer {
    margin-top: 5px;
    width: 419px;
    display: flex;
    justify-content: space-evenly;
    div {
      display: flex;
      flex-direction: column;
      p {
        height: 50px;
        font-size: 36px;
        font-family: PingFangSC-Semibold, PingFang SC;
        font-weight: 600;
        line-height: 50px;
        margin-bottom: 6px;
        color: #072074;
        text-shadow: 2px 4px 7px rgb(85 132 255 / 50%);
      }
      h1 {
        height: 17px;
        margin-top: 3px;
        font-size: 12px;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #91a7dc;
        line-height: 17px;
        color: #91a7dc;
      }
    }
  }
}
//公共title
.title {
  display: flex;
  padding: 15px;
  p {
    margin-right: 10px;
    font-size: 16px;
    font-family: PingFangSC-Semibold, PingFang SC;
    font-weight: 600;
    color: #333;
  }
  span {
    font-size: 12px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999;
    margin-top: 5px;
  }
}
.red {
  margin-left: 50px;
  width: 430px;
  height: 166px;
  margin-top: 60px;
  border-radius: 20px;
  background: #e9f3ff;
  background-repeat: no-repeat, no-repeat;
  background-position: 0 0, calc(100% - 12px) 100%;
  background: #fbefe8
    url(http://likede2-admin.itheima.net/img/sale.606b0d8c.png) no-repeat
    calc(100% - 12px) 100%;
}
// 红色尾部
.footerred {
  display: flex;
  justify-content: space-evenly;
  div {
    margin-top: 10px;
    p {
      height: 50px;
      font-size: 36px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      line-height: 50px;
      color: #ff5757;
      text-shadow: 2px 4px 7px rgba(255, 99, 85, 0.5);
    }
    h1 {
      height: 17px;
      margin-top: 3px;
      font-size: 12px;
      font-family: PingFangSC-Regular, PingFang SC;
      font-weight: 400;
      color: #91a7dc;
      line-height: 17px;
      color: #de9690;
    }
  }
}
//白色的
.white {
  margin-top: 60px;
  width: 310px;
  height: 538px;
  border-radius: 20px;
  background-color: #fff;
  float: right;
  margin-top: -150px;
}
</style>
